<template>
  <div>
    <!-- 插值语法 -->
    <div>{{ text }}</div>
    <!-- 内容渲染 -->
    <div>
      <p v-text="textContent"></p>
      <p v-html="htmlContent"></p>
    </div>
    <!-- 属性绑定 -->
    <div>
      <img v-bind:src="imageUrl" alt="图片">
      <a :href="linkUrl">点击跳转</a>
    </div>
    <!-- 事件绑定 -->
    <div>
      <button v-on:click="()=>{console.log('v-on')}">点击（v-on）</button>
      <button @click="()=>{console.log('@')}">点击（@简写）</button>
    </div>
    <!-- 表单双向绑定 -->
    <div>
      <input type="text" v-model="inputValue">
      <p>输入框的值是：{{ inputValue }}</p>
    </div>
    <!-- 条件渲染 -->
    <div>
      <p v-if="isVisible">内容显示了（v-if）</p>
      <p v-show="isVisible">内容显示了（v-show）</p>
      <button @click="()=>this.isVisible = !this.isVisible">切换可见性</button>
    </div>
    <!-- 列表渲染 -->
    <div>
      <ul>
        <li v-for="(item, index) in items" :key="index">
          {{ item }}
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: "O2_template-grammar",
  data() {
    return {
      text: "插值语法",

      textContent: "这是v-text渲染的内容",
      htmlContent: "<strong>这是v-html渲染的<strong>HTML</strong>内容</strong>",

      imageUrl: "https://raw.githubusercontent.com/malred/malcode-site-photos/master/img/getqrcode.png",
      linkUrl: "https://malcode-site.github.io/",

      message: "",

      inputValue: "",

      isVisible: true,

      items: ["苹果", "香蕉", "橙子"]
    }
  }
}
</script>